<template>
  <div class="menuCard1">
    <div class="menu">
      <li
        class="item"
        v-for="(item, index) in list"
        :key="index"
        @click="activateIndex = index"
      >
        <div class="menuItem btn">
          <span class="iconfont" :class="item.icon"></span>
          {{ item.menu1 }}
        </div>
        <div
          class="smenu"
          v-for="(item2, index2) in item.menu2"
          :key="index2"
          :class="index == activateIndex ? 'show' : ''"
        >
          <div class="menuItem">{{ item2 }}</div>
        </div>
      </li>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
  setup() {
    const list = ref([
      { menu1: "user", icon: "icon-user", menu2: ["test", "test"] },
      { menu1: "message", icon: "icon-message", menu2: ["test", "test"] },
      { menu1: "setting", icon: "icon-setting-copy", menu2: ["test", "test"] },
      { menu1: "logout", icon: "icon-log-out", menu2: ["test", "test"] },
    ]);
    const activateIndex = ref(-1);

    return { list, activateIndex };
  },
});
</script>
<style lang="scss" scoped>
.menuCard1 {
  list-style: none;
  .menu {
    width: 15rem;
    border-radius: 0.25rem;
    overflow: hidden;
  }
  .item {
    border-top: 0.1rem solid #1abc9c;
    overflow: hidden;
  }
  .menuItem {
    cursor: pointer;
  }
  .btn {
    display: block;
    background-color: #2980b9;
    text-transform: capitalize;
    color: #fff;
    font-size: 1rem;
    padding: 0.7rem 1.2rem;
    position: relative;
  }
  .btn::before {
    content: "";
    display: block;
    width: 0.7rem;
    height: 0.7rem;
    position: absolute;
    left: 1.25rem;
    bottom: -0.35rem;
    background-color: #2980b9;
    transform: rotate(45deg);
  }
  .btn span {
    margin-right: 0.5rem;
  }
  .smenu {
    background-color: #333;
    overflow: hidden;
    transition: max-height 0.4s;
    max-height: 0;
  }
  .smenu .menuItem {
    color: #fff;
    display: block;
    padding: 0.7rem 1rem;
    position: relative;
    margin: 0.2rem 0;
  }
  .smenu .menuItem::before {
    content: "";
    position: absolute;
    width: 0.2rem;
    height: 100%;
    background-color: #2980b9;
    left: 0.1rem;
    top: 0;
    opacity: 0;
    transition: 0.3s;
  }
  .smenu .menuItem:hover {
    &::before {
      opacity: 1;
    }
  }

  .show {
    max-height: 10rem;
  }
}
</style>
